着色器语言GLSL ES
第19~32行顶点、片元着色器源码使用着色器语言GLSL ES书写，意味着你从前端转过来，要多学一门语言。 从形式上看，把着色器代码以字符串的形式赋值给Javascript语言关键字var声明的变量，可能有些读者会问，为什么要这 样做，简单说CPU执行的脚本语言Javascript和GPU执行的着色器语言GLSL ES要做区分，Javascript语言通过浏览器解释器控 制CPU，通过CPU控制GPU，着色器语言构成的代码被编译后再交给GPU执行。
着色器语言用于计算机图形编程，运行在GPU中，平时所说的大多数语言编写的程序都是运行在CPU中。 与OpenGL API相配合的是着色器语言GLSL，与OpenGL ES API、WebGL API相互配合的是着色器语言GLSL ES。OpenGL标准应用的是客户端 OpenGL ES应用的是移动端，WebGL标准应用的是浏览器平台。下一节课会对WebGL API进行介绍。
内置变量
1. 程序第22行代码表示给内置变量gl_PointSize赋值20，也就是设置会在屏幕上显示的像素大小。
2. 程序第24行代码表示给内置变量gl_Position赋值vec4(0.0,0.0,0.0,1.0)，也就是设置顶点位置坐标，vec4代表的是一种数据类型， 在这里可以理解为vec4()是一个可以构造出vec4类型数据的构造函数，前三个参数表示坐标值xyz，再添加一个数可以构建出齐次坐标，方便矩阵变换， 也就是线性代数里面讲解到的乘法运算，在图形学中经常需要处理图形的缩放、平移、旋转等几何变换，如果你学习过计算机图形学，一定不会陌生 如果你从没学过计算机图形学或者你的线性代数都还给老师了，对齐次坐标，矩阵变换等概念不熟悉，后面会讲解，这样也没关系，可以暂时不管。 后面的教程尽量在讲解时弱化数学的内容，及使用到，也会做成一个库让大家调用。
3. 程序第31行代码表示给内置变量gl_FragColor赋值vec4(1.0,0.0,0.0,1.0)，也就是设置会在屏幕上显示的像素的颜色，vec4()构造函数 前三个参数，表示颜色RGB值，最后一个参数是透明度A。
语法
gl_PointSize、gl_Position、gl_FragColor都是内置变量，也就是说不需要声明，这一点与多数编程语言不同，这主要是由GPU的特殊性决定，感兴趣的话 可以研究显卡的硬件结构，渲染管线等概念。
通过程序可以看出来顶点着色器源码vertexShaderSource、片元着色器源码fragShaderSource，都是只有一个主函数main，也就是入口函数。
RGB三原色
RGB颜色模型或者称为红绿蓝颜色模型，通过RGB三种颜色混合出自然界的各种颜色，生活中的彩色显示器自然也是支持的，如果不支持，着色器语言中的RGB颜色值也就没有什么意义。
显示器可以分割成一个个小的像素单位，每个像素的边长大约零点几个mm，你可以把
使用HTML和CSS设计过网页或使用过PS等平面设计软件，你应该都知道RGB往往使用0~255之间整数表示RGB值的大小，比如红色rgb(255,0,0),而在WebGL使用0~1之间的浮点数表示RGB值的大小，其实用整数表示颜色是对浮点数的封装， 这一点好理解从事视觉设计的人使用的颜色都是有限的，往往是一些常用颜色的组合，从物理理论的角度看，颜色是无数种，但从艺术的角度讲，往往是有限的。从计算机技术的角度看，如果RGB使用0~255之间整数表示大小， 排列组合是256x256x256中颜色组合，这已经远远满足了艺术设计的需要，255恰好是2的8次方，使用二进制表示刚好一个字节，这是有个影响就可以，如果某一天你利用原生WebGL API封装出一个应用程序，要考虑用户的习惯，物理学更关注光的本质， 视觉设计更关注不同颜色的组合对人的精神影响，计算机图形学的出现就是为了实现计算机模拟真实的世界，是艺术和科学的桥梁。
透明度A
A是英文单词透明度Alpha的缩写形式，在平面设计、三维建模渲染软件往往称为alpha通道，自然界中的物质有不透明的，半透明的，全透明的，为了描述这种现象，就需要抽象出一个参数定量描述这个性质， 在WebGL中透明度使用0~1之间浮点数表示，1.0表示不透明，0.0表示完全透明。版本
- GLSL ES1.0
- GLSL ES3.20
GLSL ES1.0对应的是WebGL1.0标准，GLSL ES3.20对应的是WebGL2.0标准，WebGL2.0的标准继承自OpenGL ES3.2。